<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>css-足球（参数控制版）</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body,
    .container,
    .box {
      height: 100%;
    }

    body {
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    }

    .box {
  position: relative;
  width: 800px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);
  &:hover {
    .face-2,
    .face-12,
    .face-7 {
      span {
        font-size: 40px;
        color: #fff;
        text-shadow: 0 0 8px #fff, 0 0 15px #4285f4, 0 0 25px #4285f4;
      }
      &::after {
        background: rgba(39, 15, 250, 0.7);
        /* 突出面强化发光 */
        box-shadow: 0 0 15px rgba(39, 15, 250, 0.8),
          0 0 30px rgba(39, 15, 250, 0.6),
          inset 0 0 10px rgba(255, 255, 255, 0.5);
      }
    }
  }
}

.ball-wrap {
  perspective: 2500px;
  /* 容器缩放通过JS动态设置 */
}
.box-running {
  animation: rotateBall 20s linear infinite;
}
.box {
  div {
    position: absolute;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    z-index: 10; /* 确保文字在多边形上方显示 */
    transition: all 0.5s ease; /* 添加过渡效果 */

    span {
      font-weight: 600;
      font-size: 32px;
      transition: font-size 0.5s ease, text-shadow 0.5s ease; /* 添加文字过渡效果 */
      color: transparent;
      background-image: -webkit-gradient(
        linear,
        left top,
        left bottom,
        color-stop(35%, #fff),
        to(#3869cc)
      );
      background-image: linear-gradient(to bottom, #fff 35%, #31e458 100%);
      -webkit-background-clip: text;
      /* 文字基础发光效果 */
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.6),
        0 0 10px rgba(49, 228, 88, 0.4);
    }
  }
}

.box > div::before {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(242, 242, 245, 0.05);
  transform: scale(1.08);
  z-index: -1; /* 让多边形背景在文字下方 */
}

.box > div::after {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  z-index: -1; /* 让多边形颜色在文字下方 */
  transition: all 0.5s ease; /* 添加过渡效果 */
}

/* 多边形基础形状（尺寸通过JS动态设置） */
.polygon6::before,
.polygon6::after {
  clip-path: polygon(0 50%, 25% 6.7%, 75% 6.7%, 100% 50%, 75% 93.3%, 25% 93.3%);
}
.polygon6::after,
.polygon5::after {
  background: rgba(66, 53, 245, 0.7);
  &:hover {
    background: rgba(6, 6, 243, 0.5);
  }
}
/* 六边形（白色）用黑色文字 */
.polygon6 {
  color: #fff;
}

.polygon5::before,
.polygon5::after {
  clip-path: polygon(
    50% 0,
    97.55% 34.55%,
    79.39% 90.45%,
    20.6% 90.45%,
    2.45% 34.55%
  );
}

/* 五边形（黑色）用白色文字 */
.polygon5 {
  color: #fff;
}

@keyframes rotateBall {
  0% {
    transform: rotateY(0deg) rotateX(30deg) rotateZ(30deg);
  }
  100% {
    transform: rotateY(360deg) rotateX(30deg) rotateZ(30deg);
  }
}

.face-text-7 {
  transform: rotateZ(155deg);
}
.face-text-2 {
  transform: rotateZ(-47deg);
}
.face-text-2 {
  transform: rotateZ(-41deg);
}

/* 模糊效果类 */
.blur-effect {
  filter: blur(3px);
  opacity: 0.6;
}

  </style>
</head>
<body>
  <div class="container">
    <div class="box box-running"></div>
  </div>
  <script>
    // 核心缩放参数：控制足球整体大小
    const scaleRatio = 1.2

    const base = {
      polygon6: 200,
      polygon5: 170,
      translateZ: 238, // 六边形的基础距离
      polygon5Offset: 6, // 五边形往外移动的偏移量（核心调整值）
      containerScale: 0.6,
      fontSizeRatio: 0.15,
    }

    // 计算缩放后的参数（重点：为五边形单独设置更远的距离）
    const scaled = {
      polygon6: base.polygon6 * scaleRatio,
      polygon5: base.polygon5 * scaleRatio,
      translateZ: base.translateZ * scaleRatio, // 六边形的最终距离
      polygon5TranslateZ: (base.translateZ + base.polygon5Offset) * scaleRatio, // 五边形的最终距离（更远）
      containerScale: base.containerScale * scaleRatio,
      fontSize: Math.max(base.polygon6 * base.fontSizeRatio * scaleRatio, 16),
    }

    let faceCount = 0
    const texts = ['行', '情', '指']

    // 动态设置CSS样式
    function setDynamicStyles() {
      const style = document.createElement('style')
      style.textContent = `
    .polygon6 {
      width: ${scaled.polygon6}px;
      height: ${scaled.polygon6}px;
    }
    .polygon5 {
      width: ${scaled.polygon5}px;
      height: ${scaled.polygon5}px;
    }
    .container {
      transform: scale(${scaled.containerScale});
    }
    .box > div {
      font-size: ${scaled.fontSize}px;
    }
  `
      document.head.appendChild(style)
    }

    // 绘制函数：根据面的类型（五边形/六边形）使用不同的translateZ
    function draw(deg, len, className, startDeg = 0, rotateDeg = 0) {
      const fragment = document.createDocumentFragment()
      // 确定当前面的距离（五边形用polygon5TranslateZ，六边形用translateZ）
      const zDistance =
        className === 'polygon5' ? scaled.polygon5TranslateZ : scaled.translateZ

      for (let i = 0; i < len; i++) {
        const div = document.createElement('div')
        const span = document.createElement('span')

        faceCount++
        div.className = className
        div.classList.add(`face-${faceCount}`)
        const textIndex = faceCount % texts.length
        span.innerText = texts[textIndex] + faceCount
        span.className = `face-text-${faceCount}`
        div.appendChild(span)
        div.style.transform = `
      rotateY(${Math.floor((360 / len) * i + startDeg)}deg) 
      rotateX(${deg}deg) 
      rotateZ(${rotateDeg}deg) 
      translateZ(${zDistance}px) /* 使用计算好的距离 */
    `
        fragment.appendChild(div)
      }
      document.querySelector('.box').appendChild(fragment)
    }

    window.onload = function () {
      setDynamicStyles() // 应用动态样式
      // 绘制足球各部分（会自动分配文字）
      draw(-90, 1, 'polygon5')
      draw(-53, 5, 'polygon6', 36)
      draw(-26, 5, 'polygon5', 0, 180)
      draw(-11, 5, 'polygon6', 36)
      draw(11, 5, 'polygon6')
      draw(26, 5, 'polygon5', 36, 0)
      draw(53, 5, 'polygon6', 72)
      draw(90, 1, 'polygon5')

      // 获取动画容器
      const box = document.querySelector('.box')
      // 获取所有面元素
      const allFaces = box.querySelectorAll('div[class*="face-"]')
      // 需要排除的面
      const excludeFaces = box.querySelectorAll('.face-2, .face-12, .face-7')

      // 鼠标移入停止动画并应用模糊效果
      box.addEventListener('mouseenter', () => {
        box.style.animation = 'unset'
        setTimeout(() => {
          box.style.transform = 'rotateY(0deg) rotateX(30deg) rotateZ(30deg)'
          box.style.transition = 'all 0.5s ease-in-out'
        }, 10)
    
        // 给所有面添加模糊效果
        allFaces.forEach((face) => {
          face.classList.add('blur-effect')
        })
    
        // 移除需要突出显示的面的模糊效果
        excludeFaces.forEach((face) => {
          face.classList.remove('blur-effect')
        })
      })

      // 鼠标移出恢复动画并移除模糊效果
      box.addEventListener('mouseleave', () => {
        setTimeout(() => {
          box.style.transform = 'rotateY(360deg) rotateX(30deg) rotateZ(30deg)'
          box.style.transition = 'unset'
        }, 10)
    
        // 移除所有面的模糊效果
        allFaces.forEach((face) => {
          face.classList.remove('blur-effect')
        })
      })
    }
  </script>
</body>
</html>